<template>
  <div id="aCoursesList" class="bg-fa of">
    <!-- /课程详情 开始 -->
    <section class="container">
      <section class="path-wrap txtOf hLh30">
        <a href="#" title class="c-999 fsize14">首页</a>
        \
        <a href="#" title class="c-999 fsize14">秒杀产品列表</a>
        \
        <span class="c-333 fsize14">秒杀产品详情</span>

        <el-tag v-if="product.state == '秒杀中'" type="success">秒杀中</el-tag>
        <el-tag v-if="product.state == '未开始'" type="success">未开始</el-tag>
        <el-tag v-if="product.state == '已结束'" type="success">已过期</el-tag>
      </section>

      <div>
        <article class="c-v-pic-wrap" style="height: 357px">
          <section class="p-h-video-box" id="videoPlay">
            <img
              height="357px"
              width="100%"
              :src="product.img"
              :alt="product.name"
              class="dis c-v-pic"
            />
          </section>
        </article>
        <aside class="c-attr-wrap">
          <section class="ml20 mr15">
            <h2 class="hLh30 txtOf mt15">
              <span class="c-fff fsize24">{{ product.name }}</span>
              <!--  -->
            </h2>
            <section class="c-attr-jg">
              <span class="c-fff">价格：</span>
              <b class="c-yellow" style="font-size: 24px"
                >￥{{ product.price }}</b
              >
            </section>
            <section
              v-if="product.state == '秒杀中'"
              class="c-attr-mt c-attr-undis"
            >
              <span class="c-fff fsize14">秒杀剩余时间：{{ countDown }}</span>
            </section>
            <section class="c-attr-mt of">
              <span class="c-fff fsize14"
                >产品状态：{{ product.state }}&nbsp;&nbsp;&nbsp;</span
              >
            </section>
            <br />
            <section class="c-attr-mt">
              <!-- @click="getSeckillPath(product.id)"  -->
              <a
                href="javascript:;"
                v-if="product.state == '秒杀中'"
                :title="product.state"
                @click="centerDialogVisible = true"
                class="comm-btn c-btn-3"
                >立即购买</a
              >
              <a
                href="javascript:;"
                v-if="product.state == '未开始'"
                :title="product.state"
                class="comm-btn c-btn-3"
                >秒杀未开始</a
              >
              <a
                href="javascript:;"
                v-if="product.state == '已结束'"
                :title="product.state"
                class="comm-btn c-btn-3"
                >秒杀已结束</a
              >
            </section>
          </section>
        </aside>
        <aside class="thr-attr-box">
          <section>
            <ol class="thr-attr-ol clearfix">
              <br />
              <li>
                <p>&nbsp;</p>
                <aside>
                  <span class="c-fff f-fM" style="font-size: 18px"
                    >申请人数</span
                  >
                  <br />
                  <h6 class="c-fff f-fM mt10">{{ product.sale }}</h6>
                </aside>
              </li>
              <br /><br />
              <li>
                <p>&nbsp;</p>
                <aside>
                  <span class="c-fff f-fM" style="font-size: 18px"
                    >库存数量</span
                  >
                  <br />
                  <h6 class="c-fff f-fM mt10">{{ product.count }}</h6>
                </aside>
              </li>
              <br /><br />
              <li>
                <p>&nbsp;</p>
                <aside>
                  <span class="c-fff f-fM" style="font-size: 18px"
                    >存款成功率</span
                  >
                  <br />
                  <h6 class="c-fff f-fM mt10">98%</h6>
                </aside>
              </li>
            </ol>
          </section>
        </aside>
        <div class="clear"></div>
      </div>

      <div class="mt20 c-infor-box">
        <article class="fl col-7">
          <section class="mr30">
            <div class="i-box">
              <div>
                <section id="c-i-tabTitle" class="c-infor-tabTitle c-tab-title">
                  <a name="c-i" class="current" title="产品详情">产品详情</a>
                </section>
              </div>
              <article class="ml10 mr10 pt20">
                <div>
                  <h6 class="c-i-content c-infor-title">
                    <span>产品描述</span>
                  </h6>
                  <div class="course-txt-body-wrap">
                    <section class="course-txt-body">
                      <p><b>产品利率：</b>{{ product.interest }}%</p>
                      <p v-if="product.method > 0">
                        <b>产品存款方式(定期)：</b>{{ product.method }}月
                      </p>
                      <p v-if="product.method == 0">
                        <b>产品存款方式(活期)：</b>活期存款
                      </p>
                      <p v-if="product.method > 0">
                        <b>产品预计收入：</b
                        ><span style="text-decoration：underline;color:red;"
                          >{{
                            (((product.price * product.interest) / 100) *
                              product.method) /
                            12
                          }}元</span
                        >
                      </p>
                      <p><b>秒杀开始时间：</b>{{ startTime }}</p>
                      <p><b>秒杀结束时间：</b>{{ endTime }}</p>
                      <br />
                      <p><b>产品介绍</b></p>
                      <p>利息计算公式：本金×利率×时间</p>
                      <p>{{ product.pdescribe }}</p>
                    </section>
                  </div>

                  <br />
                  <br />
                  <h6 class="c-i-content c-infor-title">
                    <span>购买说明</span>
                  </h6>
                  <div class="course-txt-body-wrap">
                    <section class="course-txt-body">
                      <p><b>申请条件</b></p>
                      <p>&nbsp;&nbsp;&nbsp;每人限申请一份。</p>
                      <p>
                        &nbsp;&nbsp;&nbsp;年龄必须满足{{ age_size }}周岁以上。
                      </p>
                      <p v-if="overdue == 1">
                        &nbsp;&nbsp;&nbsp;无近3年逾期2次以上（金额小于1000元，3天内还清的除外）。
                      </p>
                      <p v-if="job == 1">
                        &nbsp;&nbsp;&nbsp;状态为“无业/失业”不可申请。
                      </p>
                      <p v-if="dishonesty == 1">
                        &nbsp;&nbsp;&nbsp;客户没有列入当前严重违法失信被执行人名单。
                      </p>
                      <br />
                      <p><b>申请流程</b></p>
                      <p>
                        &nbsp;&nbsp;&nbsp;客户递交基本信息资料，包括工作单位和联系电话。存款银行或公司核查客户的信用信息，包括客户的信用级别是否有违法记录，针对个体户和中小企业，还需调查其企业经营状况。
                      </p>
                      <p>
                        &nbsp;&nbsp;&nbsp;存款单位工作人员与客户签约，并在最短时间内实现存款。
                      </p>
                      <p>银行存款需要的条件:</p>
                      <p>
                        &nbsp;&nbsp;&nbsp;具有完全民事行为能力、城镇居民常住户口或合法有
                        效的居民身份证明，银行存款建议存款人年龄一般在18-60岁之间。
                      </p>
                      <p>&nbsp;&nbsp;&nbsp;有良好的征信。</p>
                    </section>
                  </div>
                </div>
                <!-- /课程介绍 -->

                <!-- /课程大纲 -->
              </article>
            </div>
          </section>
        </article>
        <aside class="fl col-3">
          <div class="i-box">
            <div>
              <section class="c-infor-tabTitle c-tab-title">
                <a title href="javascript:void(0)">所属银行</a>
              </section>
              <section class="stud-act-list">
                <ul style="height: auto">
                  <li>
                    <div class="u-face">
                      <a href="#">
                        <img
                          src="https://www.csxbank.com/Upload/Template/yizhu/SiteConfigPhoto/Original/202008/72edc4bb-a942-4742-8972-8ea6fd989d22.png"
                          width="50"
                          height="50"
                          alt
                        />
                      </a>
                    </div>
                    <section class="hLh30 txtOf">
                      <a
                        class="c-333 fsize16 fl"
                        href="https://baike.baidu.com/item/%E4%B8%89%E6%B9%98%E9%93%B6%E8%A1%8C/16293888?fr=aladdin"
                        >三湘银行</a
                      >
                    </section>
                    <section class="hLh20 txtOf">
                      <span class="c-999">湖南省和中部地区首家民营银行</span>
                    </section>
                  </li>
                </ul>
              </section>
            </div>
          </div>
        </aside>
        <div class="clear"></div>
      </div>
    </section>

    <el-dialog
      title="请输入验证码"
      :visible.sync="centerDialogVisible"
      @open="openCode"
      width="30%"
    >
      <div>
        <img
          @click="openCode"
          :src="codePath"
          alt="验证码"
          class="dis c-v-pic"
        />
      </div>
      <div style="width: 200px">
        <el-input
          v-model="input"
          placeholder="请输入上图中计算结果"
          clearable
          maxlength="10"
        ></el-input>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getSeckillPath(product.id)"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import SeckillProductApi from "@/api/seckillProduct.js";
import SeckillOrderApi from "@/api/seckillOrder.js";
import utilApi from "@/api/util.js";
import cookie from "js-cookie";
export default {
  asyncData({ params, error }) {
    try {
      return SeckillProductApi.getSeckillProdctById(params.id).then(
        (response) => {
          if (response.data.code != 200) {
            error({ statusCode: 404, message: "页面未找到或没有数据！" });
            return;
          }
          console.log(response);
          var policy = response.data.data.policy;
          var copyoverdue = policy.substring(0, 1);
          var copyjob = policy.substring(1, 2);
          var copydishonesty = policy.substring(2, 3);
          var copyage_size = policy.substring(4);
          return {
            params: params.id,
            product: response.data.data.data,
            startTime: new Date(
              response.data.data.data.startTime
            ).toLocaleString(),
            endTime: new Date(response.data.data.data.endTime).toLocaleString(),
            overdue: copyoverdue,
            job: copyjob,
            dishonesty: copydishonesty,
            age_size: copyage_size,
          };
        }
      );
    } catch {
      error({ statusCode: 404, message: "页面未找到或没有数据！" });
    }
  },
  data() {
    return {
      input: "",
      codePath: "",
      centerDialogVisible: false,
      property: "value",
      countDown: "",
    };
  },
  methods: {
    openCode() {
      var jsonStr = cookie.get("token");
      if (jsonStr == null || jsonStr == "") {
        this.centerDialogVisible = false;
        this.is_login();
        return;
      }
      utilApi.getCode().then((response) => {
        this.codePath = window.URL.createObjectURL(response.data);
      });
    },
    getSeckillPath(id) {
      this.centerDialogVisible = false;
      let code = this.input;
      if (code == null || code == "") {
        this.$message({
          message: "验证码不能为空",
          type: "warning",
        });
        return;
      }

      SeckillOrderApi.getSeckillPath(id, code).then((response) => {
        if (response.data.code == 200) {
          var path = response.data.data.data;
          const loading = this.$loading({
            lock: true,
            text: "订单正在努力创建中，请稍等...",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
          });
          SeckillOrderApi.seckillProductOrder(id, path).then((response) => {
            if (response.data.code == 200) {
              this.goToPay(response.data.data.data);
            } else {
              this.$message({
                message: response.data.message,
                type: "warning",
              });
            }
          });

          loading.close();
        } else {
          this.$message.error(response.data.message);
        }
      });
      this.input = "";
    },
    is_login() {
      this.logout();
      this.$notify.error({
        title: "错误",
        message: "登录身份已过期，请重新登录",
      });
    },
    logout() {
      cookie.set("userInfo", "");
      cookie.set("token", "");
    },
    goToPay(orderId) {
      const h = this.$createElement;
      this.$msgbox({
        title: "提示",
        message: h("p", null, [
          h("span", null, "抢购成功,您的订单号为: "),
          h("i", { style: "color: teal" }, orderId),
          h("span", null, ",是否前往支付金额？"),
        ]),
        showCancelButton: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "执行中...";
            setTimeout(() => {
              done();
              setTimeout(() => {
                instance.confirmButtonLoading = false;
              }, 300);
            }, 1000);
          } else {
            done();
          }
        },
      }).then((action) => {
        this.$router.push({
          path: "/order",
          query: { orderId: orderId, productId: this.params },
        });
      });
    },
    getCurrentTime(timetemp) {
      var nowtime = new Date(), //获取当前时间-->
        timetemp = new Date(timetemp); //定义结束时间-->
      var lefttime = timetemp.getTime() - nowtime.getTime(), //距离结束时间的毫秒数-->
        leftd = Math.floor(lefttime / (1000 * 60 * 60 * 24)), //计算天数-->
        lefth = Math.floor((lefttime / (1000 * 60 * 60)) % 24), //计算小时数-->
        leftm = Math.floor((lefttime / (1000 * 60)) % 60), //计算分钟数-->
        lefts = Math.floor((lefttime / 1000) % 60); //计算秒数-->
      if (lefttime <= 1000) {
        location.reload();
      }
      return leftd + " 天 " + lefth + " 时 " + leftm + " 分 " + lefts + " 秒 "; //返回倒计时的字符串-->
    },
  },
  mounted() {
    if (this.product.state == "秒杀中") {
      let then = this;
      setInterval(function () {
        // document.getElementById("countDown").innerHTML="距离活动结束时间:"+then.getCurrentTime(then.product.endTime)
        then.countDown = then.getCurrentTime(then.product.endTime);
      }, 1000); //反复执行函数本身
    }
  },
};
</script>
<style scoped>
</style>